<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="wangdali@qq.com">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>东方市智慧党建平台驾驶舱</title>
     <link rel="shortcut icon" href="favicon.ico" type="image/ico" />
     <link rel="stylesheet" href="css/life.css">
     <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
     <script type="text/javascript" src="js/echarts4.min.js"></script>
     <script type="text/javascript" src="js/life.js"></script>
     <script type="text/javascript">
         <!--
         $(window).resize(function ()// 绑定到窗口的这个事件中
         {
             // var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
             var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值
             var wH = window.innerHeight;// 当前窗口的高度
             var wW = window.innerWidth;// 当前窗口的宽度
             // var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
             var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
             $('html').css('font-size', rem + "px");
             myChart1.resize();
             myChart2.resize();
             myChart3.resize();
             myChart4.resize();
             myChart5.resize();
             myChart6.resize();
             myChart7.resize();
             myChart81.resize();
             myChart82.resize();
             myChart83.resize();
             myChart84.resize();
             myChart91.resize();
             myChart92.resize();
             myChart93.resize();
             myChart94.resize();
         });
         //-->
     </script>
 </head>
 <body>
 <div class="container">
     <header><div class="herder_bg"></div>
        <a id="btn_title"  href="">东方市智慧党建平台管理驾驶舱</a>
        <a id="btn_build"  href="build.html">组织建设</a>
        <a id="btn_life"  href="life.html">组织生活</a>
        <a id="btn_edu"  href="edu.html">党员教育</a>
        <a id="btn_map"  href="map.html">党建地图</a>
     </header>
     <article>
         <div id="hideleft"></div>

         <div id="hideright"></div>


         <div class="wrap">
             <div  class="center">
                <div class="sun-div">
                    <!--div class="sun-title"><span class="">组织建设情况</span></div-->
                    <div id="data-list">
                        <table style="width: 100%">
                            <tr style="height: 0.5rem">
                                <td style="width: 50%;">
                                    <div class="sun-box">
                                        <div class="sun-item">累计召开会议(次)</div>
                                        <div class="sun-value">239</div>
                                    </div>
                                </td>
                                <td style="width: 50%;">
                                    <div class="sun-box">
                                        <div class="sun-item">累计举办活动(次)</div>
                                        <div class="sun-value">248</div>
                                    </div>
                                </td>
                            </tr>
                            <tr style="height: 0.5rem">
                                <td style="width: 50%;">
                                    <div class="sun-box">
                                        <div class="sun-item">累计参加会议(人次)</div>
                                        <div class="sun-value">274234</div>
                                    </div>
                                </td>
                                <td style="width: 50%;">
                                    <div class="sun-box">
                                        <div class="sun-item">累计参加活动(人次)</div>
                                        <div class="sun-value">342532</div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </diiv>
                </div>
                    <div id="ec7" class="left-ec" ></div>
                </div>
                <div class="sun-div">
                    <div class="sun-title"><span class="">年度会议目标达成</span></div>
                    <table style="width: 100%">
                        <tr">
                            <td style="width: 25%;"><div id="ec81" class="left-ec"></div></td>
                            <td style="width: 25%;"><div id="ec82" class="left-ec"></div></td>
                            <td style="width: 25%;"><div id="ec83" class="left-ec"></div></td>
                            <td style="width: 25%;"><div id="ec84" class="left-ec"></div></td>
                        </tr>
                    </table>
                </div>
                <div  class="sun-div div_btm">
                    <div class="sun-title"><span class="">年度活动目标达成</span></div>
                    <table style="width: 100%">
                        <tr">
                            <td style="width: 25%;"><div id="ec91" class="left-ec"></div></td>
                            <td style="width: 25%;"><div id="ec92" class="left-ec"></div></td>
                            <td style="width: 25%;"><div id="ec93" class="left-ec"></div></td>
                            <td style="width: 25%;"><div id="ec94" class="left-ec"></div></td>
                        </tr>
                    </table>
                </div>
             </div>
         </div>


         <div class="left_margin  box-div">
             <div class="sun-div">
                 <div class="sun-title"><span class="">每月会议召开情况</span></div>
                 <div id="ec1" class="left-ec" ></div>
             </div>
             <div class="sun-div">
                 <div class="sun-title"><span class="">党组织会议召开情况</span></div>
                 <div id="ec2" class="left-ec"></div>
             </div>
             <div  class="sun-div div_btm">
                 <div class="sun-title"><span class="">会议签到率对比</span></div>
                 <div id="ec3" class="left-ec" ></div>
             </div>
         </div>


         <div class="right_margin box-div">
            <div class="sun-div">
                <div class="sun-title"><span class="">每月活动举办情况</span></div>
                <div id="ec4" class="left-ec"></div>
            </div>
            <div class="sun-div">
                <div class="sun-title"><span class="">党组织活动举办情况</span></div>
                <div id="ec5" class="left-ec"></div>
            </div>
            <div  class="sun-div div_btm">
                <div class="sun-title"><span class="">最具人气活动</span></div>
                <div id="ec6" class="left-ec" ></div>
            </div>
         </div>
     </article>
     <footer style="position: fixed;bottom: 0;width:100%;text-align: center;font-size: 0.12rem;color: #6cbbe6;">&copy;2019, 东方市组织部</footer>
 <script type="text/javascript">
     var myChart1 = echarts.init(document.getElementById('ec1'));
     var myChart2 = echarts.init(document.getElementById('ec2'));
     var myChart3 = echarts.init(document.getElementById('ec3'));
     var myChart4 = echarts.init(document.getElementById('ec4'));
     var myChart5 = echarts.init(document.getElementById('ec5'));
     var myChart6 = echarts.init(document.getElementById('ec6'));
     var myChart7 = echarts.init(document.getElementById('ec7'));
     var myChart81 = echarts.init(document.getElementById('ec81'));
     var myChart82 = echarts.init(document.getElementById('ec82'));
     var myChart83 = echarts.init(document.getElementById('ec83'));
     var myChart84 = echarts.init(document.getElementById('ec84'));
     var myChart91 = echarts.init(document.getElementById('ec91'));
     var myChart92 = echarts.init(document.getElementById('ec92'));
     var myChart93 = echarts.init(document.getElementById('ec93'));
     var myChart94 = echarts.init(document.getElementById('ec94'));

     $(function () {
         $("#hideleft").toggle(
             function(){
                 $(".left_margin").animate({marginLeft:"-133%"});
                 $(".wrap").animate({marginLeft:0});
                 $(".center").animate({marginLeft:0});
             },
             function(){
                 $(".center").animate({marginLeft:"33%"});
                 $(".left_margin").animate({marginLeft:"-100%"});
             }
         );
         $("#hideright").toggle(
             function(){
                 $(".right_margin").animate({marginRight:"-133%"});
                 $(".wrap").animate({marginRight:0});
                 $(".center").animate({marginRight:0});
             },
             function(){
                 $(".center").animate({marginRight:"33%"});
                 $(".right_margin").animate({marginLeft:"-33%"});
             }
         );
     });
 </script>
 </body>
</html>
